<template>
  <view
    @touchstart="handlestart"
    @touchend="handleend"
  >
    <slot></slot>
  </view>
</template>

<script>
export default {
  data () {
    return {
      // 按下的时间
      startTime: 0,
      startX: 0,
      startY: 0,

    }
  },
  methods: {
    //  用户按下屏幕,记录按下的时间戳和坐标
    handlestart (e) {
      this.startTime = Date.now()
      this.startX = e.changedTouches[0].clientX
      this.startY = e.changedTouches[0].clientY
    },
    handleend (e) {
      const endTime = Date.now()
      const endX = e.changedTouches[0].clientX
      const endY = e.changedTouches[0].clientY
      // 判断按下的时长
      if (endTime - this.startTime > 2000) {
        return;
      }
      // 定义一个变量用来存放滑动的方向
      let direction = ''
      //   先判断用户的滑动距离是否合法，合法的话再判断滑动的方向,【注意加上绝对值】【当上下滑动小于20才能被认为是水平滑动】
      if (Math.abs(endX - this.startX) > 20 && Math.abs(endY - this.startY) < 20) {
        // 滑动方向
        direction = endX - this.startX > 0 ? 'right' : 'left'
      }
      else {
        return;
      }
      // 用户做了合法的滑动操作
      // 触发自定义事件并传递参数
      this.$emit('swiperAction', { direction })
    }
  }
}
</script>

<style scope>
</style>